<template>
  <div class="talk-item" :class="{ isMe }">
    <div class="user-info">
      <img :src="data.img" alt="">
      <div v-if="isMe">我</div>
      <div v-else>{{ data.userName }}</div>
    </div>
    <div  class="talk-row">
      <div class="talk-box">
        <div v-html="data.msg" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      isMe: {
        type: Boolean,
        default: () => false
      },
      data: {
        type: Object,
        default: () => {
          return {}
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.talk-item{
  width: 100%;
  margin-bottom: 20px;
  .user-info{
    display: flex;
    img{
      width: 60px;
      height: 60px;
      border-radius: 3px;
      margin-right: 10px;
    }
  }
  .talk-row{
    padding-left: 70px;
    display: flex;
    .talk-box{
      background-color: rgb(247, 224, 195);
      padding: 10px 15px;
      border-radius: 5px;
      width: 60%;
      margin-top: -20px;
    }
  }
  
  &.isMe{
    .user-info{
      flex-direction: row-reverse;
      img{
        margin-right: 0;
        margin-left: 10px;
      }
    }
    .talk-row{
      justify-content: flex-end;
      padding-left: 0;
      padding-right: 70px;
    }
  }
}
</style>